<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .item:hover {
            cursor: move;
        }
    </style>
</head>
<body>
<div class="item" id="item">拖动我试试</div>
<script>
    function init() {
        const item = document.getElementById('item');
        item.onmousedown = mousedown;
    }

    function mousedown(e) {
        this.distanceLeft = e.clientX - (this.moveX || 0);
        this.distanceTop = e.clientY - (this.moveY || 0);
        document.onmousemove = mousemove.bind(this);
        document.onmouseup = mouseup.bind(this);
    }

    function mousemove(e) {
        this.moveX = e.clientX - this.distanceLeft;
        this.moveY = e.clientY- this.distanceTop;
        if (this.moveX < 0) {
            this.moveX = 0;
        } else if (this.moveX > (document.documentElement.clientWidth - this.clientWidth)) {
            this.moveX = document.documentElement.clientWidth - this.clientWidth
        }
        if (this.moveY < 0) {
            this.moveY = 0;
        } else if (this.moveY > (document.documentElement.clientHeight - this.clientHeight)) {
            this.moveY = document.documentElement.clientHeight - this.clientHeight
        }
        this.style.transform = `translate(${this.moveX}px,${this.moveY}px)`;
    }

    function mouseup() {
        document.onmousemove = null;
        document.onmouseup = null;
    }

    init()
</script>
</body>
</html>